import React, { Component } from 'react';
import { Form, Button, Badge, Modal, Row, Col, Input, Table, DatePicker, Select } from 'antd';
import car from '../../assets/car.png';
import styles from './FormStyles.less';
const { RangePicker } = DatePicker;
const statusMap = ['default', 'processing', 'success', 'error'];
const status = ['待审核', '已审核', '已驳回'];
const FormItem = Form.Item;

/**
 * 数组相减的方法
 * @param {Array} a
 * @param {Array} b
 */
function arrSubtraction(a, b) {
  if (Array.isArray(a) && Array.isArray(b)) {
    return a.filter(i => !b.includes(i));
  }
  throw new new TypeError('arguments must be array')();
}

@Form.create()
export default class SelectCutIn extends Component {
  state = {
    selectedRowKeys: [],
    selectedRows: {},
  };

  onSelectChange = (selectedRowKeys, selectedRows) => {
    console.log('selectedRowKeys changed: ', selectedRows);
    this.setState({ selectedRowKeys, selectedRows });
  };

  getFormValue = () => {
    const { form } = this.props;
    let postvalue = {};
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const { entries } = Object;
      for (const [key, value] of entries(fieldsValue)) {
        if (value !== null && value !== undefined) {
          postvalue[key] = value;
        }
      }
      if (postvalue.date && postvalue.date.length > 0) {
        const startSubDate = postvalue.date[0].format('YYYY-MM-DD');
        const endSubDate = postvalue.date[1].format('YYYY-MM-DD');
        postvalue = {
          ...postvalue,
          startSubDate,
          endSubDate,
        };
        delete postvalue.date;
      }
    });
    return postvalue;
  };

  handleSearch = e => {
    e.preventDefault();
    const { dispatch } = this.props;
    const postvalue = this.getFormValue();
    //console.log('values', postvalue);
    dispatch({
      type: 'cutinlib/fetch',
      payload: postvalue,
    });
  };
  submit = () => {
    const { selectedRowKeys, selectedRows } = this.state;

    this.props.setMatId(selectedRows);
    this.props.form.resetFields();
    this.props.handleModalVisible(false);
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const {
      modalVisible,
      handleModalVisible,
      mats,
      cutinlib: { list, matTypeCodes },
    } = this.props;
    let data = list.length > 0 ? list : [];
    //data = arrSubtraction(list, mats);
    const { selectedRowKeys } = this.state;
    const rowSelection = {
      type: 'radio',
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    const columns = [
      {
        title: '创建时间',
        dataIndex: 'createTime',
        sorter: true,
      },
      {
        title: '文件名',
        dataIndex: 'imeName',
      },
      {
        title: '素材类型',
        dataIndex: 'matType',
        sorter: true,
      },
      {
        title: '素材模版',
        dataIndex: 'matTemplate',
        sorter: true,
      },
      {
        title: '缩略图',
        dataIndex: 'imeUrl',
        render: thumbnail => (
          <img src={thumbnail || car} className={styles.Appimg} alt="icon" size="small" />
        ),
      },
      {
        title: '播放时长',
        dataIndex: 'icPlayTimeLen',
      },
    ];
    return (
      <Modal
        title="添加插播素材"
        visible={modalVisible}
        onOk={this.submit}
        width={1000}
        onCancel={() => handleModalVisible(false)}
      >
        <Form>
          <div className={styles.tableList}>
            <div className={styles.tableListForm}>
              <Form onSubmit={this.handleSearch}>
                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                  <Col md={8} sm={24}>
                    <FormItem>
                      {getFieldDecorator('date')(
                        <RangePicker
                          format="YYYY-MM-DD"
                          placeholder={['开始时间', '结束时间']}
                          // onChange={onChange}
                          // onOk={onOk}
                          style={{ width: '100%' }}
                        />
                      )}
                    </FormItem>
                  </Col>
                  <Col span={4} md={4} sm={24}>
                    <FormItem>
                      {getFieldDecorator('matExampleName', {
                        rules: [{ required: false, message: '请输入素材名称!' }],
                      })(<Input placeholder="文件名称" />)}
                    </FormItem>
                  </Col>
                  <Col span={8} md={3} sm={24}>
                    <FormItem>
                      {getFieldDecorator('matType')(
                        <Select
                          allowClear="true"
                          placeholder="插播素材类型"
                          style={{ width: '100%' }}
                        >
                          {matTypeCodes.map((item, index) => (
                            <Option value={item.code}>{item.name}</Option>
                          ))}
                        </Select>
                      )}
                    </FormItem>
                  </Col>

                  <Col span={4} md={3} sm={24}>
                    <span className={styles.submitButtons}>
                      <Button
                        type="primary"
                        htmlType="submit"
                        style={{ marginRight: 20 }}
                        onClick={this.handleSearch}
                      >
                        查询
                      </Button>
                    </span>
                  </Col>
                </Row>
              </Form>
            </div>
          </div>

          <Table rowKey="matId" rowSelection={rowSelection} dataSource={data} columns={columns} />
        </Form>
      </Modal>
    );
  }
}
